<template>
  <div>
    <van-nav-bar title="生成订单" left-text="" left-arrow @click-left="$router.back()">
      <template #right>
        <span class="threeTip">...</span>
      </template>
    </van-nav-bar>
    <div style="border-bottom:1px dashed #ddd" @click="$router.push('/address')">
      <div>{{ defaultAddress.name }} {{ defaultAddress.tel }}</div>
      <div>{{ defaultAddress.address }}</div>
    </div>
    <van-card v-for="item in payList" :num="item.goodsCount" :price="item.sellingPrice" :title="item.goodsName"
      :thumb="item.goodsCoverImg" />

    <div>
      <button @click="createOrder">生成订单</button>
    </div>
    <van-action-sheet v-model="show" title="请选择支付方式">
      <van-button type="primary" block @click="pay(1)">支付宝</van-button>
      <van-button type="primary" block @click="pay(2)" color="linear-gradient(to right, #ff6034, #ee0a24)">微信
      </van-button>
    </van-action-sheet>

  </div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
// import { saveOrder, paySuccess } from '@/api/index'
export default {
  name: 'XXX',
  methods: {
    pay(payType) {
      // 调用 paySuccess接口
      paySuccess({
        orderNo: this.orderNo,
        payType
      }).then(data => {
        // 成功之后跳转历史订单页面
        alert('跳转历史订单页')
      })
    },
    createOrder() {
      // 调用弹框
      this.show = true
      // 调用接口
      saveOrder({
        addressId: this.defaultAddress.id,// 地址id
        cartItemIds: this.payList.map(item => item.cartItemId)
      }).then(data => {
        // data.data 是订单号码
        this.orderNo = data.data;
      })
    }
  },
  data() {
    return {
      show: false,
      orderNo: ''
    }
  },
  computed: {
    ...mapState({
      payList: 'payList',
      defaultAddress() {
        let obj = this.$store.state.defaultAddress
        if (obj.addressId) {
          return {
            id: obj.addressId,
            address: `${obj.provinceName} ${obj.cityName} ${obj.regionName} ${obj.detailAddress}`,
            name: obj.userName,
            tel: obj.userPhone
          }
        } else if (obj.id) {
          return obj
        }
      }
    })
  },
  created() {
    console.log(this.$store.state.defaultAddress) // 获取选择的地址
    // 使用地址信息的时候 我们要区分 数据是后台给的那个还是组件给的那个？
    /* 
      if(this.$store.state.defaultAddress.addressId){
        后台给的
      }else if (this.$store.state.defaultAddress.id){
        组件给的
      }
    */
    // 还得获取选择的 要付钱的购物车数据
    console.log(this.$store.state.payList)
  }
}
</script>
<style lang="less">
</style>